<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单事件</title>
<style type="text/css">
#login{
	width: 400px;
	height: 250px;
	background-color: #f2f2f2;
	border:1px solid #DDDDDD;
	padding: 5px;
}
#login fieldset {
	border: none;
	margin-top: 10px;
}
#login fieldset legend{
	font-weight: bold;
}
#login fieldset p{
	display: block;
	height: 30px;
}
#login fieldset p label {
	display: block;
	float:left;
	text-align: right;
	font-size: 12px;
	width: 90px;
	height: 30px;
	line-height: 30px;
}
#login fieldset p input {
	display: block;
	float:left;
	border: 1px solid #999;
	width: 250px;
	height: 30px;
	line-height: 30px;
}
#login fieldset p input.code{
	width: 60px;
}
#login fieldset p img{
	margin-left: 10px;
}
#login fieldset p a{
	color: #057BD2;
	font-size: 12px;
	text-decoration: none;
	margin: 10px;
}
#login fieldset p input.btn{
	background: url("./images/login.gif") no-repeat;
	width: 98px;
	height: 32px;
	margin-left: 60px;
	color: #ffffff;
    cursor: pointer;
}
#login fieldset p input.input_focus{
	background-color: #BEE7FC;
}
</style>
<script type="text/javascript" src="./js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
$(document).ready(function () {
    //鼠标事件 click事件提交表单，鼠标移至按钮，按钮字体变粗。移出按钮则字体为正常字体
   $("input[name='member']").focus(function(){
     $(this).addClass("input_focus") ; 	
     
   }).blur(function(){
     $(this).removeClass("input_focus") ; 	
   
   });
   $(".btn").mouseover(function(){
         $(this).css("font-weight","bold");
   }).mouseout(function(){
         $(this).css("font-weight","normal");
   }).click(function(){
   $("#login").submit();
   
   });
   $("input").keypress(function(e){
   if(e.keyCode==13){
      $("#login").submit();
   
   }
   
   });
   
   $("input").blind("keypress",function(e){
   if(e.keyCode==13){
      $("#login").submit();
   
   }
   })
  
   
   

});
</script>
</head>
<body>
<form id="login">
  <fieldset>
    <legend>用户登录</legend>
    <p>
        <label>用户名：</label>
        <input name="member" type="text" />
    </p>
    <p>
        <label>密码：</label>
        <input name="password" type="text" />
    </p>
    <p>
        <label>验证码：</label>
        <input name="code" type="text" class="code" />
        <img src="images/code.gif" width="80" height="30" /><a href="#">换一张</a>
	</p>
	<p>
	         <input name="" type="button" class="btn" value="登录" />
	         <a href="#">注册</a><span>|</span><a href="#">忘记密码？</a>
	</p>
  </fieldset>
</form>
</body>
</html>